<!-- z-paging聊天输入框 -->

<template>
	<view class="chat-input-bar-container">
		<view class="chat-input-bar">
			<!-- <view class="avatar-item" @click="handleOpen">
				<image class="avatar" src="/static/avatar.png"></image>
			</view> -->
			<view class="chat-input-left">
				<view 
					class="chat-input-icon" 
					@click="toggleVoice"
				>
					<view v-if="isVoice">语音</view>
					<view v-else>文字</view>
				</view>
			</view>
			<view class="chat-input-container">
				<input 
					:focus="focus" 
					class="chat-input" 
					v-model="msg" 
					:adjust-position="false" 
					confirm-type="send" 
					type="text" 
					placeholder="请输入内容" 
					@confirm="handleSendClick" 
					v-if="!isVoice"
				/>
				<view 
					v-else 
					class="voice-text" 
					@touchstart="handleVoiceStart"
					@touchmove="handleVoiceMove"
					@touchend="handleVoiceEnd"
					@touchcancel="handleVoiceCancel"
				>按住 说话</view>
			</view>
			<view class="chat-input-right">
				<view 
					class="chat-input-send" 
					:class="{'chat-input-send-disabled': sendState || isVoice}"
					@click="handleSendClick"
				>
					<text class="chat-input-send-text">发送</text>
				</view>
			</view>
		</view>
		
		<!-- 语音输入弹窗 - 新的绿色气泡样式 -->
		<view class="voice-bubble" v-if="showVoicePopup" :class="{'voice-bubble-cancel': isCancel}">
			<view class="voice-bubble-content">
				<view class="voice-indicator">
					<view v-if="!isCancel" class="voice-wave-container">
						<view class="voice-wave-item" v-for="(item, index) in waveItems" :key="index" 
							:style="{height: (item * 1.5) + 'rpx', opacity: (item / 30)}"></view>
					</view>
					<u-icon v-else name="close" color="#FF5252" size="50"></u-icon>
				</view>
				<view class="voice-tip">
					<text>{{isCancel ? '松开手指，取消发送' : '松开发送，上滑取消'}}</text>
				</view>
				<view class="voice-time">
					<text>{{formatRecordTime}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"chat-input-bar",
		props: {
			sendState: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				msg: '',
				// 当前input focus（如果不需要切换表情面板则不用写）
				focus: false,
				// 当前表情/键盘点击后的切换类型，为空字符串代表展示表情logo但是不展示不展示表情面板（如果不需要切换表情面板则不用写）
				emojiType: '',
				isRecording: false,
				isCancel: false,
				touchStartY: 0,
				touchMoveY: 0,
				recordingTimer: null,
				isVoice: false, // 是否语音输入
				showVoicePopup: false, // 是否显示语音弹窗
				recordingTime: 0, // 录音时长（秒）
				waveHeights: [20, 30, 40, 30, 20], // 波形高度初始值
				waveAnimationTimer: null, // 波形动画定时器
				waveItems: [10, 15, 20, 15, 10], // 波形图项
			};
		},
		computed: {
			// 格式化录音时间
			formatRecordTime() {
				const minutes = Math.floor(this.recordingTime / 60);
				const seconds = this.recordingTime % 60;
				return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
			}
		},
		methods: {
			// 处理发送按钮点击
			handleSendClick() {
				if(this.sendState) return false;
				if (this.msg.length > 0) {
					this.$emit('send', this.msg);
					this.msg = '';
				}
			},
			setMsg(msg){
				this.msg = msg;
			},
			handleOpen(){
				this.$emit('handleOpen');
			},
			toggleVoice(){
				this.isVoice = !this.isVoice;
			},
			// 开始语音输入
			handleVoiceStart(e) {
				this.touchStartY = e.touches[0].clientY;
				this.isCancel = false;
				this.showVoicePopup = true;
				this.recordingTime = 0;
				
				// 开始录音
				this.$emit('startVoiceInput', true, false);
				
				// 开始计时
				this.recordingTimer = setInterval(() => {
					this.recordingTime++;
					// 超过60秒自动停止
					if (this.recordingTime >= 60) {
						this.handleVoiceEnd();
					}
				}, 1000);
				
				// 开始波形动画
				this.startWaveAnimation();
			},
			// 结束语音输入
			handleVoiceEnd() {
				this.stopTimers();
				this.showVoicePopup = false;
				
				// 结束录音
				if (!this.isCancel) {
					this.$emit('startVoiceInput', false, false);
				} else {
					this.$emit('startVoiceInput', false, true);
				}
			},
			// 取消语音输入
			handleVoiceCancel(e) {
				this.isCancel = true;
				this.handleVoiceEnd();
			},
			// 处理手指移动
			handleVoiceMove(e) {
				this.touchMoveY = e.touches[0].clientY;
				const moveY = this.touchStartY - this.touchMoveY;
				// 上滑超过50像素判定为取消
				this.isCancel = moveY > 50;
			},
			// 停止所有计时器
			stopTimers() {
				if (this.recordingTimer) {
					clearInterval(this.recordingTimer);
					this.recordingTimer = null;
				}
				
				if (this.waveAnimationTimer) {
					clearInterval(this.waveAnimationTimer);
					this.waveAnimationTimer = null;
				}
			},
			// 开始波形动画
			startWaveAnimation() {
				this.waveAnimationTimer = setInterval(() => {
					// 随机生成波形高度
					this.waveItems = [
						Math.floor(Math.random() * 15) + 5,  // 5-20
						Math.floor(Math.random() * 20) + 10, // 10-30
						Math.floor(Math.random() * 25) + 15, // 15-40
						Math.floor(Math.random() * 20) + 10, // 10-30
						Math.floor(Math.random() * 15) + 5,  // 5-20
					];
				}, 200);
			},
			// 获取波形高度
			getWaveHeight(index) {
				return this.waveHeights[index];
			}
		},
		// 组件销毁时清除计时器
		beforeDestroy() {
			this.stopTimers();
		}
	}
</script>

<style scoped lang="scss">
	.chat-input-bar {
		display: flex;
		flex-direction: row;
		align-items: center;
		border-top: solid 1px #f5f5f5;
		background-color: #f8f8f8;
		
		padding: 10rpx 20rpx;
	}
	.chat-input-container {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		padding: 15rpx;
		background-color: white;
		border-radius: 10rpx;
	}
	.chat-input {
		flex: 1;
		font-size: 28rpx;
		height: 30rpx;
	}
	.voice-text {
		text-align: center;
		width: 100%;
		color: #666;
		font-size: 28rpx;
		padding: 10rpx 0;
	}
	.avatar{
		width: 54rpx;
		height: 54rpx;
		border-radius: 54rpx;
		margin-right: 16rpx;
	}

	.chat-input-right {
		display: flex;
		align-items: center;
		margin-left: 20rpx;
	}
	.chat-input-left{
		display: flex;
		align-items: center;
		margin-right: 20rpx;
	}

	.chat-input-send {
		background-color: #007AFF;
		border-radius: 10rpx;
		width: 100rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.3s;
	}
	
	.chat-input-send-text {
		color: white;
		font-size: 26rpx;
	}
	
	.chat-input-send-disabled {
		background-color: #656262;
		opacity: 0.4;
	}
	
	/* 新的语音气泡样式 */
	.voice-bubble {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 999;
	}
	
	.voice-bubble-content {
		width: 300rpx;
		height: 300rpx;
		background-color: rgba(0, 0, 0, 0.6);
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 30rpx;
	}
	
	.voice-bubble-cancel {
		.voice-bubble-content {
			background-color: rgba(0, 0, 0, 0.7);
		}
	}
	
	.voice-indicator {
		width: 200rpx;
		height: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.voice-wave-container {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}
	
	.voice-wave-item {
		width: 8rpx;
		background-color: #007AFF;
		margin: 0 6rpx;
		border-radius: 4rpx;
		transition: all 0.2s;
	}
	
	.voice-tip {
		color: white;
		font-size: 26rpx;
		margin-top: 20rpx;
		text-align: center;
	}
	
	.voice-time {
		color: #007AFF;
		font-size: 30rpx;
		margin-top: 20rpx;
		text-align: center;
		font-weight: bold;
	}
</style>